<template>
  <div id="app">
    <div class="main">
      <h1>四川省疫情舆情数据可视化平台</h1>
    </div>
    <div class="maping"> 
      <div class="left"><router-view/></div>
      <div class="right"><Navigation></Navigation></div> 
    </div>
     
  </div>
</template>

<script>
import Navigation from './components/Navigation';
export default ({
components:{Navigation},
})
</script>

<style lang="less" scoped>    

.main{
  position:sticky;
  top:0;
  height:70px;
  h1{
    text-align: center;
    padding-top:10px;
    font-family:"思源黑体";
    color:white;
    letter-spacing: 3px;
  }
}
 .maping{
  display: flex;
  justify-content: space-between;
  width: 100%;
  .left{
    float: left;
    width: calc(100% - 180px);
    height:100%;
  }
  .right{
    position:sticky;
    top:70px;
    float: right;
    // background-color: black;
    width: max-content;
    height: 100%;
    overflow: hidden;
}
 }
 
</style>
